<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录弹窗</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        span {
            color: black;
            cursor: pointer;
        }

        #box {
            width: 500px;
            height: 300px;
            background-color: white;
            position: absolute;
            user-select: none;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        .top {
            height: 30px;
        }

        .buttom {
            text-align: center;
        }

        .buttom>p {
            height: 50px;
        }

        input {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <p>你好,欢迎来到国家信息安全系统,请先请先<span style="color: blue;">登录</span></p>
    <div id="box">
        <div class="top" style="cursor: move;">
            <span style="left: 20px;">注册登录</span>
            <span style="float: right;" id="closes">X</span>
        </div>
        <hr>
        <div class="buttom">
            <p style="margin-top: 20px;">用户名<input type="text" id="user">
                <br>
                <span id="userErr"></span>
            </p>
            <p>密码:<input type="passward" id="pass">
                <br>
                <span id="passErr"></span>
            </p>
            <p><input type="checkbox" id="select">同意保密协议</p>
            <p><button disabled>登录</button></p>
        </div>
    </div>
</body>
<script>
    let body = document.querySelector('body');
    let box = document.querySelector('#box');
    let btn = document.querySelector('body>p>span');
    let closes = document.getElementById('closes');
    let pass = document.getElementById('pass');
    let select = document.getElementById('select');
    let button = document.querySelector('button');
    let topDrag = document.querySelector('.top');

    let userReg = /^[a-zA-Z](\d|[a-zA-Z]){5,11}$/;
    let numReg = /\d+/;
    let passReg = /\S{6,18}/;
    let blankReg = /\s/;
    let isok = false;

    //点击出现弹窗
    btn.onclick = () => {
        box.style.display = 'block';
        body.style.backgroundColor = 'gray';
    }

    //点击X和按键Esc关闭弹窗
    closes.onclick = () => {
        box.style.display = 'none';
        body.style.backgroundColor = '';
    }

    window.onkeydown = e => {
        if (e.keyCode == 27) {
            box.style.display = 'none';
            body.style.backgroundColor = '';
        }
    }

    //用户名验证,必须以字母开头,且必须包含字母和数字,长度6-12位
    user.onblur = () => userErr.innerHTML = userReg.test(user.value) && numReg.test(user.value) ? '' : '用户名不合法';

    //密码验证,总长度为6-18位;且其中不能有空格
    pass.onblur = () => passErr.innerHTML = passReg.test(pass.value) && !blankReg.test(pass.value) ? '' : '密码不合法';

    //同意保密协议才可登录
    select.onclick = () => select.checked ? button.removeAttribute("disabled") : button.disabled = 'disabled';

    //拖拽表格标题可拖动整个弹窗表格
    topDrag.onmousedown = () => isok = true;
    window.onmouseup = () => isok = false;

    window.onmousemove = e => {
        if (isok) {
            e = e || window.event;
            let eleX = e.clientX - topDrag.offsetWidth / 2;
            let eleY = e.clientY - topDrag.offsetHeight / 2;

            if (eleX >= window.innerWidth - box.offsetWidth) eleX = window.innerWidth - box.offsetWidth;
            else if (eleX < 0) eleX = 0;

            if (eleY >= window.innerHeight - box.offsetHeight) eleY = window.innerHeight - box.offsetHeight;
            else if (eleY < 0) eleY = 0;

            box.style.left = eleX + box.offsetWidth / 2 + 'px';
            box.style.top = eleY + box.offsetHeight / 2 + 'px';
        }
    }
    
</script>

</html>